// HelloWorld.Vue
<template>
  <!-- {{ rawData }} -->
  <!-- {{ winSize }} -->
  <!-- <el-button @click="test">test</el-button> -->
  <div class="chart" ref="barChart"></div>
</template>
<script>
import { bus } from '@/main.js';
// 引入 ECharts 主模块
import { mapState, mapMutations } from 'vuex';
import * as echarts from 'echarts';

import { option } from './optsBar.js';
let _configOpts = option;

export default {
  name: 'HelloWorld',
  components: {},
  props: {
    stock: {
      type: [String],
      validator: function(value) {
        let re = new RegExp(/^\d{4,6}\.[A-Z]{2,3}$/);
        return re.test(value);
      },
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      sfb: null,
      rawData: [],
      // 柱状图的数据和配置
      barChartData: {
        xAxisData: [],
        seriesData: [],
      },
      // 柱状图的ECharts实例
      barChart: null,
    };
  },
  computed: {
    ...mapState(['winSize']),

    params_code: function() {
      let p = {
        get_type: 'range',
        prod_code: this.stock,
        candle_period: 6,
        // fields
        search_direction: 2,
        data_count: 300,
        // start_date: this.$moment()
        //   .subtract(1, 'years')
        //   .format('YYYYMMDD'),
        // end_date: this.$moment().format('YYYYMMDD'),
      };
      return p;
    },
  },
  methods: {
    ajaxData: function() {
      let p = this.params_code;
      this.$api
        .getKline(p)
        .then((res) => {
          let key = p.prod_code;
          let data = this._.get(res, 'data.candle')[key];
          this.rawData.splice(0, this.rawData.length);
          this.rawData.push(...data);
          return Promise.resolve(200);
        })
        .then((res) => {
          this.initChart(0, 2000);
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
    initChart() {
      this.barChart = echarts.init(this.$refs.barChart);

      let option = Object.assign(_configOpts, {});
      option.xAxis.data = this.rawData.map((item, i, a) => {
        return item[0];
      });
      option.series[0].data = this.rawData.map((item) => {
        return item[5];
      });

      console.log(option);
      this.barChart.setOption(option);
    },
    reInitChart() {
      console.log('reInitChart');
      // myChart.setOption(this.optsEcharts);

      if (this.barChart) {
        console.log(true);
        this.barChart.resize();
      }
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    console.log('在实例挂载到DOM节点上之后');
    this.ajaxData();
    this.initChart();
    bus.$on('resizeWindow', () => {
      this.reInitChart(0, 2000);
      console.log('bar-resizeWindow');
    });
    bus.$on('datazoom', (e) => {
      this.sfb = e;

      // this.initChart(e.realFrom, e.realTo);
      this.barChart.dispatchAction({
        type: 'dataZoom',
        start: e.realFrom / 20,
        end: e.to / 20,
      });
    });
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart {
  height: 100%;
  width: 100%;
  background-color: #333;
}
</style>
